<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
</head>
<body>
<div id="app">
    <p>{{fullName}}</p>
    <!-- v-on @ -->
    <button @click="deal()">调用计算属性的setter方法</button>
</div>
<script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            firstName: 'zhang',
            lastName: 'sanfeng'
        },
        methods: {
            deal() {
                // 调用计算属性的setter方法
                this.fullName = '娃 哈哈';
            }
        },
        computed: {
            /*//get
            fullName(){
            return this.firstName + ' ' + this.lastName
            }*/

            fullName: {
                // get方法
                get: function () {
                    return this.firstName + ' ' + this.lastName;
                },
                // set方法 相当于传值。
                set: function (str) {
                    // alert(0)
                    let nameArr = str.split(' ');
                    this.firstName = nameArr[0];
                    this.lastName = nameArr[1];
                }
            }

        }

    })
</script>
</body>
</html>